

/*list.htm -----------------------*/

.list-tab{
	background:#fff;border-bottom:2px solid $brand-dark;
	.container{padding:0;}
	li{
		float:left;border-bottom:4px solid transparent;position:relative;bottom:-3px;
		a{padding-left:30px;padding-right:30px;font-size:$font-size-large;display:block;color:$brand-dark-lighter;}
		&.active{font-weight:bold;border-color:$brand-match;
			a{color:$gray;}
		}
	}
	@media(max-width:767px){
		li{
			width:33.33%;
			a{padding-left:0;padding-right:0;width:100%;;text-align:center;}
		}
	}
	@media(max-width:420px){
		li a{font-size:100%;}
	}
}

.list-tab ~ .tab-content{
	padding-top:30px;padding-bottom:30px;
	@media(max-width:768px){
		&{padding:0;}
	}
}


.list-type{
	background:#fff;
	dl{
		margin:0;padding:10px 0;border-bottom:1px dotted $gray-line;
		&:last-child{border:none;}
		dt{width:6em;padding-top:5px;}
		dd{
			margin-left:7em;padding-right:20px;
			> a{padding:6px 10px;display:block;text-decoration:none;}
		}
	}
	.sel-tab{
		ul{
			border:none;
			> li{
				> a{padding:5px 10px;}
				&.active a{
					background:$brand-dark-bg;color:$brand-theme;cursor:pointer;
					&:hover{color:$brand-theme-dark;}
				}
				&:hover:not(.active) a{border-color: transparent;}
				&:first-child.active{
					a{border-color: transparent;background:none;}
				}
			}
		}
	}
	.tab-pane{
		padding:20px;padding-top:15px;background:$brand-dark-bg;border:1px solid $gray-line;margin-top:-1px;
		&:first-child{padding:0;border:none;}
	}
	.checkbox-inline:first-child,
	.checkbox-inline + .checkbox-inline,
	.radio-inline:first-child,
	.radio-inline + .radio-inline{margin-left:0;margin-right:15px;margin-top:5px;}
	.checkbox-inline:last-child,.radio-inline:last-child{margin-right:0;}
	.checkbox-inline,
	.radio-inline{
		small{color:$gray-lighter;}
	}
	.con{padding:10px;padding-top:0;}

	@media(max-width:767px){
		dl{
			dt{width:100%;padding-left:30px;}
			dd{
				margin-left:0;padding-left:20px;
			}
		}

	}
}


.list-seleced{
	margin-top:20px;background:#fff;
	.con{
		min-height:54px;border-bottom:1px dotted $gray-line;margin:0;padding:10px 240px 10px 70px;position:relative;
		&.nokong{padding-right:160px;}
		&.noseq{padding-right:10px;}
		small{color:$gray-lighter;position:absolute;left:10px;top:16px;}
		.label-theme{
			display:inline-block;margin:3px 3px;border:1px solid $brand-theme;color:$brand-theme;font-size:$font-size-base;font-weight:normal;@include border-radius(30px);
			span{margin-left:5px;position:relative;top:1px;}
		}
		.other{margin-left:-50px;}
		.label ~ .other{
			position:absolute;right:0;top:10px;margin-left:0;
			.btn-group ~ .btn-group{display:none;}
		}
		label ~ .btn-group,
		.btn-group:first-child{
			@include btn-noline();
			span.fa{color:$gray-lighter;}
		}

		@media(max-width:800px){
			&{padding-right:0}
			.label ~ .other,.other{
				padding-left:10px;position:relative;margin-left:-70px;padding-right:0;text-align:right;
				label{float:left;position:relative;top:6px;}
			}
			.label ~ .other{
				border-top:1px dotted $gray-line;padding:0;
				.btn-group:first-child{display:none;}
				.btn-group ~ .btn-group{
					display:block;@include clearfix();margin:0;margin-right:-4px;margin-left:-1px;
					button{width:33.3%;@include border-radius(0);}
					.btn-default.active{background:$brand-match;border-color:$brand-match-dark;color:#fff;}
				}
			}
		}
		@media(max-width:500px){
			&{padding-left:10px;}
			.label ~ .other,.other{
				margin:0;margin-left:-10px;
				.btn-group ~ .btn-group{
					span:not(.fa){display:none;}
				}
			}
			small{position: relative;display:block;left:auto;top:auto;}
		}

	}
	.choose{
		padding:0 10px;
		> div{
			padding-top:10px;padding-bottom:10px;
			.form-control{display:inline-block;margin-right:5px;text-align:center;}
			> *:last-child{float:right;position:relative;top:6px;}
		}
		.exp,.rent{border-right:1px dotted $gray-line;}
		.exp{
			.form-control{width:8em;}
		}
		.rent{
			.form-control{width:6em;margin-left:5px;}
			.btn-group{
				@include btn-noline();
				.btn{padding-left:10px;padding-right:10px;}
				.dropdown-menu{min-width:auto;}
			}
		}
		.size{
			.form-control{width:4em;margin-left:5px;}
		}
		@media(max-width:1200px){
			.exp,.size{> *:last-child{display:none;}}
		}
		@media(max-width:910px){
			.size{strong{display:none;}}
		}
		@media(max-width:850px){
			.exp,.rent,.size{
				float:none;width:100%;border:none;border-bottom:1px dotted $gray-line;
				strong,
				> *:last-child{display:inline-block;}
			}
		}
		@media(max-width:440px){
			.rent{
				label{display:block;margin-top:5px;}
				a{top:-20px;}
				.dropdown-menu{left: auto;right: 0;}
			}
		}

		@media(max-width:340px){
			.rent{
				.btn-group .btn{padding-left:0;padding-right:0;}
			}
		}
	}
}


.list-con{
	background:#fff;border-top:1px dotted $gray-line;
	.item{
		padding:20px;margin:0;border-bottom:1px dotted $gray-line;
		&:hover{background:rgba(0,0,0,.01);cursor:pointer;}
		.media-left > div{width:240px;height:170px;overflow:hidden;position:relative;}
		img{width:100%;}
		.media-heading{
			span{color:$brand-theme;margin-right:10px;font-weight:bold;}
		}
		.info{
			margin-top:10px;color:$gray-lighter;
			.time{
				margin-left:20px;
				i{@include opacity(.5);margin-right:5px;}
			}
		}
		.pos{
			margin-top:20px;color:$brand-dark-light;
			p{padding:2px 0;margin:0;@include text-overflow();}
			span{@include span-jg();}
		}
		.do{
			margin-top:10px;
			> *{
				margin-right:20px;
				i{margin-right:5px;}
			}
			a{color:$blue;}
			span{
				color:$brand-dark-light;
				i{color:$blue;}
			}
		}
		.rent,.size{
			padding-top:30px;text-align:right;color:$brand-dark;
			strong{position:relative;top:-8px;font-size:160%;color:$brand-theme;}
			strong+span{display:inline-block;float:right;}
		}
		.rent{
			p{
				margin-bottom:5px;color:$brand-dark;
				small{float:left;font-weight:normal;color:$gray-lighter;font-size:100%;}
				strong+span{width:68px;}
			}
		}
		.rent,.size{
				strong+strong:before{content:" ~ ";color:$brand-dark-lighter;font-weight:normal;}
		}
		.size{
			position:relative;
			strong+span{width:30px;}
			.btn{position:absolute;right:15px;top:60px;background:none;@include border-radius($border-radius-base);padding:5px 10px;color:$brand-dark-lighter;border-color:$brand-dark-lighter}
		}
		@media(max-width:1200px){
			.pos{
				p{display:inline;}
				p:first-child span:last-child{
					padding-right:15px;
					&:before{content:"/";}
				}
			}
		}
		@media(max-width:1200px)and(min-width:860px){
			.media-left{display: none;}
			.rent,.size{padding-top:0;}
			.size{.btn{top:30px;}}
			.pos{
				margin-top:10px;
				p{display:block;}
				p:first-child span:last-child{
					padding-right:0;
					&:before{content:"";}
				}
			}
			.do{margin-top:5px;}
		}
		@media(max-width:859px){
			.size{paddind-right:0;}
			.base{width:58.33%;padding-left:0;}
			.media-left{display: none;}
			.pos{
				margin-top:10px;
				p{display:block;}
				p:first-child span:last-child{
					padding-right:0;
					&:before{content:"";}
				}
			}
			.size{
				padding-top:0;
				.hidden{padding-bottom:2px;display:block !important;font-weight:normal;color:$gray-lighter;font-size:100%;}
			}
			.rent{
				width:25%;padding-top:0;
				p{
					small{padding-bottom:2px;display:block;float:none;}
				}
			}
			&.need{
				.size,.rent{
					width:41.67%;
					.hidden{display:block !important;}
				}
			}

		}
		@media(max-width:730px){
			&.row{position:relative;padding-bottom:40px;}
			.media-left{
				display:table-cell;
				> div{width:180px;}
			}
			.base{position:relative;padding-bottom:10px;width:100%;float:none;padding-right:0;margin-right:0;}
			.do{position:absolute;bottom:0;left:0;width:100%;margin-bottom:-50px;}
			.rent{
				width:80%;padding-left:0;@include clearfix();
				p{
					float:left;margin-right:30px;
					small{display:inline;float:left;}
					strong{margin:0 10px;}
					strong+span{display:inline;width:auto;}
				}
			}
			.size{
				padding-right:0;width:20%;padding-top:0;position:relative;
				.hidden{display: none !important;}
				.btn{top:26px;right:0;padding:0px 4px;}
			}
			&.need{
				.size,.rent{
					width:50%;margin-top:-5px;
					*{display:inline !important;float:none;}
					.hidden{display:inline !important;}
					p{margin:0;float:none;}
					strong{position:relative;top:0;}
				}
				.rent{text-align:left;}
			}

		}

		@media(max-width:580px){
			.rent,.size{display:block;width:100%;float:none;padding-right:0;padding-left:0;}
			.rent{
				p{
					margin:0;display:block;float:none;
					strong{margin:0;}
					strong+span{margin-left:5px;display:inline-block;float:right;width:60px;text-align:left;}
				}
			}
			.size{
				.hidden{display:block !important;float:left;letter-spacing:.5em;}
				strong+span{margin-left:5px;width:60px;text-align:left;}
				.btn{margin-top:0;top:-5px;right:0;padding:2px 4px;}
			}
			.pos{padding-right:0;}
			.do{margin-bottom:-115px;}
			&.need{
				.rent,.size{
					display:block;width:100%;float:none;text-align:right;
					.hidden{float:left;top:8px;position:relative;letter-spacing:.5em;}
					strong+span{display:inline-block !important;width:60px;}
				}
				.rent{margin-top:-10px;margin-bottom:5px;}
				.do{margin-bottom:-80px;}
			}
		}
		@media(max-width:460px){
			.media-left{
				display:block;padding-right:0;margin-bottom:10px;
				> div{width:100%;}
			}
		}
	}
	.item ~ nav{text-align:center;}

	.cut{
		margin:-1px 0;padding:0;border-top:1px solid $gray-lighter;border-bottom:1px solid $gray-lighter;
		> div{
			margin:0;padding:0;border-right:1px solid $gray-lighter;
			&:last-child{border-right:none;}
			.item-store{
				border:none;padding:10px;
				.media-heading,.media-heading+p{white-space:normal;height:1.1em;overflow:hidden;}
				.media-heading+p{height:1.3em;}
			}
		}
		@media(max-width:992px){
			.media{@include store-nopic();}
		}
		@media(max-width:600px){
			.media-heading{display:none;}
			> div{float: none;width:100%;border-right:none;border-top:1px solid $gray-lighter;margin-top:-1px;}
		}
	}
}


.ratio{
	padding:0;@include square(56px);@include border-radius(100%);line-height:56px;font-weight:bold;position:fixed;right:10px;top:50%;@include box-shadow(0 4px 4px rgba(0,0,0,.15));z-index:99;
	i{display:block;position:absolute;right:-4px;top:-4px;@include square(24px);@include border-radius(100%);line-height:24px;text-align:center;font-style:normal;background:$brand-theme;font-family:verdana;font-weight:normal;}
	@media(max-width:768px){
		&{bottom:10px;top:auto;}
	}
}
#want.active ~ .ratio{display:none;}



/*detail.htm ------------------------*/
#detail{
	.top{
		background:#fff;padding-bottom:30px;
		.row.container{margin:0 auto;}
		.pic{
			padding-left:0;position:relative;
			.carousel-inner > .item > img{width:100%;}
			.glyphicon{font-size:240%;}
			> a{position:absolute;right:30px;top:10px;color:#fff;z-index:99;font-size:140%;}
		}
		.brief{
			padding-right:0;
			.tit{
				font-size:180%;margin-top:0;line-height:1.5;
				small{
					@include border-radius(60px);background:$brand-match;color:#fff;padding:5px 10px;font-size:70%;
				}
			}
			.do{
				padding-top:10px;color:$brand-dark-lighter;
				> .text-right{
					float:right;
					i{margin-right:3px;color:$blue;}
					a,span{margin-left:10px;}
					a{
						color:$blue;text-decoration:none;
						&:hover,
						&:hover i{color:$blue-dark;}
					}
				}
			}
			dl{
				dt,dd{padding:3px 0;}
				dt{width:84px;font-weight:normal;color:$brand-dark-lighter;}
				dd{margin-left:100px;}
			}
			.price{
				background:$brand-dark-bg;padding:20px 0;
				dl{
					margin-bottom:0;position:relative;top:6px;
					dd{
						color:$brand-dark;
						strong{margin-right:5px;font-family:verdana;font-size:120%;float:left;position:relative;top:-2px;}
						&:not(:nth-child(4)){
							strong{color:$brand-theme;font-size: 180%;top:-10px; }
						}
					}
				}
				.size{
					> *{display:block;text-align:center;color:$brand-dark;font-size:$font-size-base;}
					small{color:$brand-dark-lighter;}
					strong{font-size:180%;color:$brand-theme;font-family:verdana;}
				}
			}
			.price ~ dl{
				padding:10px 0;border-bottom:1px dotted $brand-dark-lighter;
				dd{
					span,a{
						margin-right:10px;
						&:last-child{margin-right:0;}
					}
					a{color:$blue;}
					.label-theme{border:1px solid $brand-theme;color:$brand-theme;font-weight:normal;margin-left:10px;}
				}
			}
			.tel{
				p{margin:0;font-size: 120%;}
				strong{margin-left:10px;font-family:verdana;}
				small{color: $brand-theme;}
			}
		}
		@media(max-width:991px){
			&{padding-top:80px;}
			.brief{
				.tit{
					padding:3px 0;position:absolute;top:-80px;left:-100%;width:200%;@include text-overflow();
					small{position:relative;top:-2px;}
				}
				.do{position:absolute;top:-50px;left:-100%;width:200%;}

				.size{
					padding-top:5px;
					> *{display:inline-block;}
					small{
						width:84px;text-align:right;
						&:after{content:" : ";}
					}
					strong{margin:0 5px 0 16px;}
				}

			}
		}
		@media(max-width:767px){
			&{padding-top:0;}
			.pic{
				padding-right:0;
				>a{display:none;}
			}
			.brief{
				padding-left:0;
				.tit,.do{position:relative;width:100%;top:auto;left:0;}
				.tit{white-space:normal;}
				dl{
					dt{float: left;}
				}
			}
		}
		@media(max-width:767px)and(min-width:500px){
			.brief{
				.size{
					>*{display:block;margin:0;}
					small{
						text-align:center;width:100%;
						&:after{content:"";}
					}
					strong{margin:0;padding:0;}
				}
			}
		}
		@media(max-width:499px){
			dt{text-align:right;}
			.brief{
				.price{
					[class*="col-"],[class^="col-"]{width:100%;float:none;}
					.size{
						padding-top:5px;
						> *{display:inline-block;}
						small{
							width:84px;text-align:right;
							&:after{content:" : ";}
						}
						strong{display:inline;margin:0 5px 0 16px;width:auto;}
					}
				}
			}
		}
		@media(max-width:450px){
			.brief .do{
				.text-right{
					display:block;float:none;width:100%;text-align:left;
					> *:first-child{margin-left:0;}
				}
			}
			.tel{
				display:block;
				.media-left,.media-body{display:block;width:100%;text-align:center;}
			}
		}
	}

	.review,.around,.fav{
		padding-top:40px;
		>h4{
			@include tit-line(20em,$gray-bg);color:$gray-lighter;font-size:140%;
			i{margin-right:8px;color:$brand-match;font-weight:bold;}
		}
		>.con{margin-top:20px;background:#fff;}
	}
	.review{
		.con{
			padding:30px;font-size:110%;color:$brand-dark;
			p:last-child{margin:0;}
		}
		.tip{
			margin:10px auto;width:400px;background:rgba(0,0,0,.05);@include border-radius($border-radius-base);text-align:center;padding:10px 15px;font-size:85%;color:$brand-dark-light;
			p{margin-bottom:0;}
			@media(max-width: 460px){
				&{width:100%;}
			}
		}
	}
	.around{
		.map{height:300px;background:$gray;}
		.life-detail{
			padding-top:15px;padding-bottom:15px;
			.nav-pills{
				> li > a{@include border-radius(20px);font-size:120%;padding:5px 20px;}
			}
			.life-list{
				>p{
					margin:0;padding:8px 0;font-size:110%;color:$brand-dark-light;
					small{float:right;@include opacity(.7);}
				}
				.list-ul{
					height:200px;overflow-y:auto;padding-left:0;
					li{
						list-style:none;padding:10px 40px;position:relative;
						p{margin:0;@include text-overflow();font-size:120%;}
						span{position:absolute;right:0;top:10px;}
						span,small{color:$brand-dark-light;}
						i{
							position:absolute;left:0;top:4px;display:block;@include square(36px);background:url(/images/map_icon_8.png) no-repeat 0 0;
							&.bus{background-position: -96px 0;}
						}
					}
				}
			}
		}
	}
	.fav{
		#choose{margin-top:20px;}
	}


}

#myPic{
	.modal-dialog{
		width:760px;
		.carousel-inner > .item > img{width:100%;}
		.carousel-control.left{left:-15%;background:none;}
		.carousel-control.right{right:-15%;background:none;}
		.glyphicon{font-size:300%;}
		.modal-footer{position:absolute;bottom:10px;border:none;width:100%;color:#fff;text-align:center;font-weight:bold;font-family:verdana;}
	}
	@media(max-width:900px){
		.modal-dialog{width:700px;}
	}
}


#detail.need{
	.price{
		strong+strong{
			&:before{content:" ~ ";color:$brand-dark-lighter;}
		}
	}
	.price+div{
		border-bottom:1px dotted $brand-dark-lighter;
		dl{
			margin:0;padding:10px 0;
			span,a{
				margin-right:10px;
				&:last-child{margin-right:0;}
			}
			a{color:$blue;}
		}

	}
	@media(max-width:991px){
		.top{padding-top:0;}
			.brief{
				.tit{
					padding:0;position:relative;top:0;left:0;width:100%;white-space:normal;
				}
				.do{position:relative;top:0;left:0;width:100%;}
			}
	}
	@media(max-width:500px){
		.brief{
			dl{
				dt,dd{float:none;}
				dt{text-align:left;}
				dd{margin-left:0;}
			}
			.price {
				dd{position:relative;top:5px;}
			}
		}
	}
}
